<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>SlickGrid example 11: No vertical scrolling (autoHeight)</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      overflow: auto;
    }

    body {
      font: 11px Helvetica, Arial, sans-serif;
    }

    #container {
      margin: 10px;
      border: solid 1px gray;
      width: 480px;
      background: white;
    }

    #description {
      position: fixed;
      top: 30px;
      right: 30px;
      width: 25em;
    }
  </style>
</head>
<body>
<div id="container"></div>
<div id="description">
  <h2>Demonstrates:</h2>
  <ul>
    <li>autoHeight:true grid option</li>
  </ul>
</div>

<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.0.min.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>

<script>
  var grid,
      data = [],
      columns = [
        { id: "title", name: "Title", field: "title" },
        { id: "duration", name: "Duration", field: "duration" },
        { id: "%", name: "% Complete", field: "percentComplete" },
        { id: "start", name: "Start", field: "start" },
        { id: "finish", name: "Finish", field: "finish" },
        { id: "effort-driven", name: "Effort Driven", field: "effortDriven" }
      ],
      options = {
        editable: false,
        enableAddRow: false,
        enableCellNavigation: false,
        autoHeight: true
      };

  for (var i = 100; i-- > 0;) {
    data[i] = {
      title: "Task " + i,
      duration: "5 days",
      percentComplete: Math.round(Math.random() * 100),
      start: "01/01/2009",
      finish: "01/05/2009",
      effortDriven: (i % 5 == 0)
    };
  }

  grid = new Slick.Grid("#container", data, columns, options);
</script>
</body>
</html>